<script setup>
import {onMounted, ref} from "vue";
import {getAskListAPI} from "@/api/ask.js";
import {formatDateTime} from "../../utils/formatDate.js";

const askList = ref([])
const count = ref(0)
const getAskList = async () => {
  const result = await getAskListAPI()
  // console.log("=>(index.vue:7) result", result);
  askList.value = result.data.data.rows;
  count.value = result.data.data.count;
}
onMounted(() => {
  getAskList()
})
</script>

<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>咨询管理</span>
      </div>
    </template>
    <template v-for="item in askList" :key="item.id">
      <el-descriptions :title="`咨询 ${item.id}`" border column="2">
        <el-descriptions-item width="150" label-align="center" label="咨询">{{ item.askContent }}</el-descriptions-item>
        <el-descriptions-item width="150" label-align="center" label="回答">{{ item.replyContent }}</el-descriptions-item>
        <el-descriptions-item label-align="center" label="创建时间">{{ formatDateTime(item.createTime) }}</el-descriptions-item>
        <el-descriptions-item label-align="center" label="回答时间">{{ formatDateTime(item.updateTime) }}</el-descriptions-item>
      </el-descriptions>
    </template>

  </el-card>
</template>

<style scoped lang="scss">
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .el-descriptions {
    margin-bottom: 20px;
  }
}
</style>